
//视频专区
new Vue({

    data:{

        video_types: {},  //视频类型

        videos: {},       //视频相关信息

        video_list : [],  //视频列表

        query_info : {

            page : 1,

            per_page : 9,

            video_type_id : 0

        },                  //搜索参数

        loading : false,

    },

    mounted: function() {

        this.fetchVideoType()
            .then(this.hadPid);

    },

    methods:{

        /**
         * 格式化网址上面的参数
         * @param  {string} url {需要进行格式化的网址}
         * @return {Object} {格式化后的参数对象}
         */
        fomatDataFromUrl : function fomatDataFromUrl(url){

            var new_arr = {};

            var param_arr = url.split('?').pop();

            param_arr.split('&').forEach(function(param){

                new_arr[param.split('=')[0]] = param.split('=')[1];

            })

            return new_arr;

        },
        
        /**
         * 根据网址上面带有的参数进行不同的操作
         * @return {undefined}
         */
        hadPid : function hadPid(){

            var tid = this.fomatDataFromUrl(location.href).tid;

            var page = this.fomatDataFromUrl(location.href).page;

            var types = Object.keys(this.video_types);

            if( !tid ){

                if( page ) {

                    this.query_info.page = page;

                }

                this.changeTag(types[0]);

            } else {

                this.changeTag(tid);

            }

        },

        /**
         * 获取视频的类别
         * @return {promise}
         */
        fetchVideoType : function fetchVideoType(){

            this.loading = true;

            return this.$http.get('/api/home/video/create')
                            .then(function(res){

                                if( parseInt(res.data.code) !== 0 )throw new Error(res.data.error);

                                this.video_types = res.data.video_types;

                                this.video_types['0'] = '全部';

                            })
                            .catch(function(error){

                                this.$Message.error(error.message);

                            })
                            .then(function(){ this.loading = false })

        },

        /**
         * 获取视频信息
         * @param {Number} page  当前所在的页数
         * @return {undefined}
         */
        fetchVideoList : function fetchVideoList() {

            this.loading = true;

            var query_str = Qs.stringify(this.query_info);

            return this.$http.get('/api/home/video?' + query_str)
                            .then(function(res){

                                if( parseInt(res.data.code) !== 0 )throw new Error(res.data.error);

                                this.videos = res.data.videos;

                                this.video_list = this.videos.data;

                            })
                            .catch(function(error){

                                this.$Message.error(error.message);

                            })
                            .then(function(){this.loading = false})

        },

        /**
         * 切换分类的方法
         * @param {String} id   案例分类的id
         * @return {undefined}
         */
        changeTag : function changeTag(id) {

            if(this.loading)return;

            this.video_list = [];

            this.query_info.page = 1;

            this.query_info.video_type_id = id;

            this.fetchVideoList()
                .then(function(){

                    history.replaceState({},'','video?tid=' + id);

                })
        },

        /**
         * 切换分页的方法
         * @param {Number} number  {页数}
         * @return {undefined}
         */
        changePage : function changePage(number){

            if(this.loading)return;

            this.video_list = [];

            this.query_info.page = number;

            this.fetchVideoList()
                .then(function(){

                    history.pushState({},'','video?tid=' + this.query_info.video_type_id + '&page=' + number);

                })

        },

        /**
         * 获取视频类型对应的图标
         * @param {Number} index  {索引} 
         */
        changeClass : function changeClass(index) {

            var type_class = '';

            switch (Number(index)) {

                case 0 : 

                    type_class = "all";

                    break;
                
                case 1 : 

                    type_class = "company";

                    break;

                case 2 : 

                    type_class = "introduction";

                    break;

                case 3 : 

                    type_class = "case";

                    break;

                case 4 : 

                    type_class = "technology";

                    break;

            }

            return type_class;
        }

    },
  
    components:{

        bymPagination : bymPagination
    }

}).$mount("#video");





